<script setup lang="ts">
const currentId = useRoute().query.currentId as string;
const userName = useRoute().query.userName as string;
// const sum = ref(0)
const numberOfRides = ref(0)
const numberOfPassengers = ref(0)

const expenditure = ref(0)
const income = ref(0)

function rides(money: number) {
  numberOfRides.value++
  expenditure.value += money
  // sum.value -= money
}

function passengers(money: number) {
  numberOfPassengers.value++
  income.value += money
  // sum.value += money
}

const orderList = ref<OrderPO[]>([])

function formatDate(rawDate: string): string {
  let date = new Date(rawDate)
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}

onMounted(function () {
  barTitleStore().setTitle('行程统计')
  cFetch<OrderPO>('/order/api/paidList', {
    auth: true,
    defaultOpts: {
      method: 'POST',
    }
  }).then((res) => {
    orderList.value = res.data
    orderList.value.forEach((order) => {
      if (order.passengerId == currentId) {
        rides(order.cost)
      } else {
        passengers(order.cost)
      }
    })
  })
})
</script>

<template>
  <div class="header">
    <h3 style="margin: 6px">{{ userName }}</h3>
    <span class="top-info">
      <span>打车次数：<span class="fc">{{ numberOfRides }}</span></span>
      <span>载客次数：<span class="fc">{{ numberOfPassengers }}</span></span>
    </span>

    <!--    <span>收支统计：-->
    <!--    <span class="fc" v-if="sum>=0">￥{{ sum.toFixed(2) }}</span>-->
    <!--    <span style="color: red;font-weight: bold" v-else>￥{{ sum.toFixed(2) }}</span>-->
    <!--    </span>-->
    <span class="top-info">
      <span>收入统计：
        <span class="fc">￥{{ income.toFixed(2) }}</span>
      </span>
      <span>支出统计：
        <span style="color: red;font-weight: bold;">￥{{ expenditure.toFixed(2) }}</span>
      </span>
    </span>
  </div>

  <div class="line">
    <span>身份</span>
    <span>订单创建日期</span>
    <span>收支金额</span>
    <span>是否未支付</span>
  </div>

  <div class="content">
    <span class="item" v-for="item in orderList">
      <span v-if="currentId===item.passengerId">【乘客】</span>
      <span v-else>【司机】</span>

      <span>{{ formatDate(item.createdTime) }}</span>

      <span style="font-weight: bold" v-if="item.passengerId===currentId">￥-{{ item.cost }}</span>
      <span style="font-weight: bold" v-else>￥+{{ item.cost }}</span>

      <span style="color: #aa7c03" v-if="item.status===1">【未支付】</span>
    </span>
    <van-empty style="margin: 0 auto" v-if="orderList.length===0" description="还没有行程记录"></van-empty>
  </div>
</template>

<style scoped>
.header {
  display: flex;
  width: 90%;
  flex-direction: column;
  background-color: #dddbdb;
  border-radius: 15px;
  margin: 10px 0;
  padding: 10px;
  justify-content: center;
  align-items: center;
}

.content {
  width: 90%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  justify-content: center;
  align-items: start;
  background-color: #dad7d7;
}

.fc {
  color: #a17a0b;
  font-weight: bold;
}

.item {
  margin-bottom: 10px;
  font-size: 0.7rem;
}

.item > span {
  margin-right: 13px;
}

.item > span:first-child {
  margin-left: 10px;
}

.item > span:last-child {
  margin-right: 0;
}

.item:last-child {
  margin-bottom: 0;
}

.line {
  width: 90%;
  display: flex;
  justify-content: space-around;
  font-size: 0.8rem;
  background-color: #54beec;
  padding: 10px;
  font-weight: bold;
}

.top-info {
  display: flex;
  justify-content: space-evenly;
  width: 100%
}
.top-info > span:first-child {
  margin-bottom: 5px;
}
</style>